import React from 'react';
import { Modal, Input, Button, message } from 'antd';
import s from './index.module.less';


class InputModal extends React.Component {
  
    state={
        value: undefined
    }

    onClose = () => {
        this.setState({ value: undefined });
        this.props.onClose();
    }
    onSure = (e) => {
        e.stopPropagation();
        e.preventDefault();

        if(!this.state.value){
            message.warn('阶段名称不可以为空', 2);
            return;
        }
        // this.setState({ loading: true });
        this.props.onSure(this.state.value, () => {
            this.setState({ loading: false, value: undefined }, this.props.onClose);
        });

    }

    render() {
        const { visible } = this.props;
        return (
            <Modal
                wrapClassName={s.wrapModal}
                visible={visible}
                closable={false}
                width={300}
            >
                <div className={s.content}>
                    <div>
                        请输入自定义阶段名称
                        <span className="mdi mdi-close-circle" onClick={this.onClose}/>
                    </div>
                    <Input
                        placeholder="请输入名称"
                        value={this.state.value}
                        suffix={<Button type="primary" onClick={this.onSure} loading={this.state.loading}>添加</Button>}
                        onChange={e => this.setState({ value: e.target.value })}
                        onPressEnter={this.onSure}
                    />
                </div>
            </Modal>
        );
    }
}

export default InputModal